<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>前端监控SDK | 前端码农</title>
    <meta name="description" content="前端码农手记">
    <link rel="preload stylesheet" href="/fe-handbook/document/assets/style.c131dda6.css" as="style">
    <script type="module" src="/fe-handbook/document/assets/app.fb33e324.js"></script>
    <link rel="preload" href="/fe-handbook/document/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/fe-handbook/document/assets/chunks/framework.e1becf5d.js">
  <link rel="modulepreload" href="/fe-handbook/document/assets/chunks/theme.ebfdf2c7.js">
  <link rel="modulepreload" href="/fe-handbook/document/assets/pages_workReview_monitor.md.bef20b19.lean.js">
  <link rel="icon" type="image/svg+xml" href="images/logo.svg">
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-bffce215><!--[--><!--]--><!--[--><span tabindex="-1" data-v-73e3a132></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-73e3a132> Skip to content </a><!--]--><!----><header class="VPNav" data-v-bffce215 data-v-5bdc5df3><div class="VPNavBar has-sidebar" data-v-5bdc5df3 data-v-c388e33c><div class="container" data-v-c388e33c><div class="title" data-v-c388e33c><div class="VPNavBarTitle has-sidebar" data-v-c388e33c data-v-1ab7b21f><a class="title" href="/fe-handbook/document/" data-v-1ab7b21f><!--[--><!--]--><!--[--><img class="VPImage logo" src="/fe-handbook/document/images/logo.svg" alt data-v-dc109a54><!--]--><!--[-->前端码农<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-c388e33c><div class="curtain" data-v-c388e33c></div><div class="content-body" data-v-c388e33c><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-c388e33c><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-c388e33c data-v-f732b5d0><span id="main-nav-aria-label" class="visually-hidden" data-v-f732b5d0>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fe-handbook/document/" tabindex="0" data-v-f732b5d0 data-v-b7aed9c7 data-v-f3ed0000><!--[-->主页<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fe-handbook/document/pages/guide.html" tabindex="0" data-v-f732b5d0 data-v-b7aed9c7 data-v-f3ed0000><!--[-->指南<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fe-handbook/document/pages/updateLog.html" tabindex="0" data-v-f732b5d0 data-v-b7aed9c7 data-v-f3ed0000><!--[-->更新日志<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-c388e33c data-v-5e9f0637><label title="toggle dark mode" data-v-5e9f0637 data-v-67878c63><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-67878c63 data-v-92d8f6fb><span class="check" data-v-92d8f6fb><span class="icon" data-v-92d8f6fb><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-67878c63><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-67878c63><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></label></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-c388e33c data-v-ef6192dc data-v-b8f6762d><!--[--><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-c388e33c data-v-c8c2ae4b data-v-6afe904b><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-6afe904b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-6afe904b><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-6afe904b><div class="VPMenu" data-v-6afe904b data-v-e42ed9b3><!----><!--[--><!--[--><!----><div class="group" data-v-c8c2ae4b><div class="item appearance" data-v-c8c2ae4b><p class="label" data-v-c8c2ae4b>Appearance</p><div class="appearance-action" data-v-c8c2ae4b><label title="toggle dark mode" data-v-c8c2ae4b data-v-67878c63><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-67878c63 data-v-92d8f6fb><span class="check" data-v-92d8f6fb><span class="icon" data-v-92d8f6fb><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-67878c63><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-67878c63><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></label></div></div></div><div class="group" data-v-c8c2ae4b><div class="item social-links" data-v-c8c2ae4b><div class="VPSocialLinks social-links-list" data-v-c8c2ae4b data-v-b8f6762d><!--[--><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-c388e33c data-v-6bee1efd><span class="container" data-v-6bee1efd><span class="top" data-v-6bee1efd></span><span class="middle" data-v-6bee1efd></span><span class="bottom" data-v-6bee1efd></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-bffce215 data-v-ba1b30d0><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-ba1b30d0><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-ba1b30d0><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-ba1b30d0>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-ba1b30d0 data-v-fb63c957><button data-v-fb63c957>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-bffce215 data-v-fe05da0a><div class="curtain" data-v-fe05da0a></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-fe05da0a><span class="visually-hidden" id="sidebar-aria-label" data-v-fe05da0a> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><!----><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/guide.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>开发指南</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>JavaScript高级程序设计</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/advancedProgramming/index.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>0.前言</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/advancedProgramming/chapterOne.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>1.什么是JavaScript</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/advancedProgramming/chapterTwo.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>2.HTML中的JavaScript</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/advancedProgramming/chapterThree.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>3.语言基础</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>vue技术栈</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/vue/vue2.0.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>vue2.0</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/vue/vue3.0.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>vue3.0</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/vue/vuex4.0.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>vuex4.0</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>react技术栈</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/react/react.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>react18</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/react/redux.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>redux</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>nodejs技术栈</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/nodeJS/index.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>nodeJS</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/nodeJS/nest.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>nest</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>flutter</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/flutter/index.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>flutter</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>数据结构算法&设计模式</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/dataStructure.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>dataStructure</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/designPatterns.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>设计模式</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>js基础进阶</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/dataType.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>数据类型</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/typeConversion.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>数据类型转换</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/prototype.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>原型与原型链</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/scope.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>闭包</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/this.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>this指针</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/promotion.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>JS中的变量提升和函数提升</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/eventLoop.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>异步&事件循环机制</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/promise.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>promise</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/cookieLocal.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>cookie&local</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/arrayApi.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>arrayApi</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/regular.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>正则</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/coding.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>coding</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/typescript.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>typescript</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>前端综合</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/eightLeggedEssay.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>前端八股文</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/jsBase/binary.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>二进制</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/ssr.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>ssr</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/webpack.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>webpack</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/http.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>http</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/optimize.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>性能优化</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/xss-csrf.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>xss-csrf</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/linux.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>linux</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/nginx.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>nginx</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/git.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>git管理</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible has-active" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>工作复盘</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/stripe.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>stripe支付体检优化</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/interfaceSignatureDesign.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>接口签名设计</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/reduxpersistence.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>redux数据持久化</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/vuexpersistence.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>vuex数据持久化</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/reactSolt.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>react插槽设计</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/bigfileUpload.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>大文件上传</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/audio.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>音频录制</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/virtuaLlist.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>虚拟列表</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/imageCroppingCompression.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>图片裁剪&压缩</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/axiosPackaging.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>axios封装</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/monitor.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>前端监控SDK</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/workReview/ImagedragVerification.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>图片拖动验证</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-fe05da0a><section class="VPSidebarItem level-0 collapsible" data-v-fe05da0a data-v-0bb349fd><div class="item" role="button" tabindex="0" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><h2 class="text" data-v-0bb349fd>html/css</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-0bb349fd><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-0bb349fd><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-0bb349fd><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/boxModel.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>盒模型</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/margin.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>margin重叠</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/bfc.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>bfc</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/layout.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>圣杯布局&双飞翼布局</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/dice.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>flex画骰子</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/position.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>position定位</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/align.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>对齐</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/rem-em-vw.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>rem-em-vw</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/grid.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>grid布局</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0bb349fd data-v-0bb349fd><div class="item" data-v-0bb349fd><div class="indicator" data-v-0bb349fd></div><a class="VPLink link link" href="/fe-handbook/document/pages/htmlCss/htmlCss.html" data-v-0bb349fd data-v-f3ed0000><!--[--><p class="text" data-v-0bb349fd>htmlCss总结</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-bffce215 data-v-91952ce3><div class="VPDoc has-sidebar has-aside" data-v-91952ce3 data-v-c11df1f0><!--[--><!--]--><div class="container" data-v-c11df1f0><div class="aside" data-v-c11df1f0><div class="aside-curtain" data-v-c11df1f0></div><div class="aside-container" data-v-c11df1f0><div class="aside-content" data-v-c11df1f0><div class="VPDocAside" data-v-c11df1f0 data-v-cb998dce><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-cb998dce data-v-c834746b><div class="content" data-v-c834746b><div class="outline-marker" data-v-c834746b></div><div class="outline-title" data-v-c834746b>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-c834746b><span class="visually-hidden" id="doc-outline-aria-label" data-v-c834746b> Table of Contents for current page </span><ul class="root" data-v-c834746b data-v-a379eb72><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-cb998dce></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-c11df1f0><div class="content-container" data-v-c11df1f0><!--[--><!--]--><!----><main class="main" data-v-c11df1f0><div style="position:relative;" class="vp-doc _fe-handbook_document_pages_workReview_monitor" data-v-c11df1f0><div><h1 id="前端监控sdk" tabindex="-1">前端监控SDK <a class="header-anchor" href="#前端监控sdk" aria-label="Permalink to &quot;前端监控SDK&quot;">​</a></h1><ul><li><a href="https://gitee.com/fe-hl/fe-monitor-sdk" target="_blank">源码实现地址</a></li></ul><h2 id="背景" tabindex="-1">背景 <a class="header-anchor" href="#背景" aria-label="Permalink to &quot;背景&quot;">​</a></h2><ul><li>作为C端产品，我们是直接与用户打交道，一个产品的<code>稳定性</code>会直接影响到<code>用户的留存</code>，所以前端监控尤为重要，可以及时发生问题，解决问题，同时也可以根据产品的需求做业务数据埋点，通过分析埋点信息，及时调整产品的走向</li></ul><h2 id="js错误监控" tabindex="-1">js错误监控 <a class="header-anchor" href="#js错误监控" aria-label="Permalink to &quot;js错误监控&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>在promise中发生的异常，window.onerror无法捕获</p></div><ul><li>通常情况一般用<code>window.onerror</code>来捕获js运用时异常,onerror事件不仅能捕获到<code>同步</code>异常，还能捕获<code>异步</code>的异常</li><li>try，catch只能捕获js同步运用时异常</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 同步异常可以捕获</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">try</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#A6ACCD;">a</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">x</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">catch</span><span style="color:#A6ACCD;"> (error) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 异步异常无法捕获</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">try</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">a</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">x</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">catch</span><span style="color:#A6ACCD;"> (error) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 同步/异步都能捕获</span></span>
<span class="line"><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">onerror</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(...</span><span style="color:#A6ACCD;font-style:italic;">arg</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  	</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">message</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">sourceURL</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">line</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">column</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">errorObj</span><span style="color:#89DDFF;">]</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">arg</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">onerror</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h2 id="promise错误监控" tabindex="-1">promise错误监控 <a class="header-anchor" href="#promise错误监控" aria-label="Permalink to &quot;promise错误监控&quot;">​</a></h2><ul><li>window.onunhandledrejection可以捕获到Promise的运用时异常</li><li>这里需要注意的时，Promise在reject时，也会被捕获，这种情况需要过滤</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#A6ACCD;">a</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">x</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">resolve</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;font-style:italic;">reject</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#82AAFF;">reject</span><span style="color:#F07178;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">onunhandledrejection</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// reject 错误不上报</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">?.</span><span style="color:#A6ACCD;">reason</span><span style="color:#89DDFF;">?.</span><span style="color:#A6ACCD;">stack</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">onunhandledrejection</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="资源加载异常" tabindex="-1">资源加载异常 <a class="header-anchor" href="#资源加载异常" aria-label="Permalink to &quot;资源加载异常&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>1.为捕获状态时（第三个参数为true）能捕获到js执行错误，也能捕获带有src的标签元素的加载错误。</p><p>2.为冒泡状态时（第三个参数为false）能捕获到js执行错误，不能捕获带有src的标签元素的加载错误。</p></div><ul><li>如果资源加载异常会被 window.addEventListener(&#39;error&#39;,handler,true)捕获，同时它也可以js运用时异常</li><li>对于非资源加载的异常，需要过滤掉</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#A6ACCD;">(</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">				</span><span style="color:#676E95;font-style:italic;">// 只处理资源错误</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span></span>
<span class="line"><span style="color:#F07178;">					(</span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">src</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">href</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentSrc</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">				) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">callback</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">						type</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportType</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">RESOURCES_ERROR</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">						message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">资源加载异常</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">						selector</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Utils</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getSelectors</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">						sourceURL</span><span style="color:#89DDFF;">:</span></span>
<span class="line"><span style="color:#F07178;">							</span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">src</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">href</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentSrc</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">			</span><span style="color:#FF9CAC;">true</span></span>
<span class="line"><span style="color:#A6ACCD;">		)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="路由监听" tabindex="-1">路由监听 <a class="header-anchor" href="#路由监听" aria-label="Permalink to &quot;路由监听&quot;">​</a></h2><h3 id="hash-路由" tabindex="-1">Hash 路由 <a class="header-anchor" href="#hash-路由" aria-label="Permalink to &quot;Hash 路由&quot;">​</a></h3><ul><li>hash路由监听用<code>hashchange</code>来监听，hash路由发生变化会触发<code>hashchange</code>，同时也会触发<code>popstate</code>并且先触发</li><li>hashchange无法监听<code>History 路由</code>的变化</li></ul><h3 id="history-路由" tabindex="-1">History 路由 <a class="header-anchor" href="#history-路由" aria-label="Permalink to &quot;History 路由&quot;">​</a></h3><ul><li>History是html5出现的API,他有五个API,<code>back</code>、<code>go</code>、<code>forward</code>、<code>pushState</code>、<code>replaceState</code></li><li>可以用<code>popstate</code>来监听<code>History</code>路由的变化，但是遗憾的是只会<code>back</code>、<code>go</code>、<code>forward</code>调用才会触发该事件，<code>pushState</code>、<code>replaceState</code>无法触发</li><li>浏览器前进、后退按钮也会被<code>popstate</code>监听</li></ul><h3 id="路由监听兼容性思路" tabindex="-1">路由监听兼容性思路 <a class="header-anchor" href="#路由监听兼容性思路" aria-label="Permalink to &quot;路由监听兼容性思路&quot;">​</a></h3><ul><li>经过以上分析，可以用<code>popstate</code>来监听路由的变化</li><li><code>pushState</code>、<code>replaceState</code>无法触发，可以用AOP的方式重写这2个方法，创建新的全局Event事件。然后 window.addEventListener 去监听Event</li></ul><h3 id="vuerouter的坑" tabindex="-1">VueRouter的坑 <a class="header-anchor" href="#vuerouter的坑" aria-label="Permalink to &quot;VueRouter的坑&quot;">​</a></h3><ul><li><p>1、VueRouter有一个特性，在打开页面的时候，会触发history<code>replaceState</code></p></li><li><p>2、VueRouter在<code>push</code>操作的时候会先触发history <code>replaceState</code>在触发<code>pushState</code></p></li><li><p>3、VueRouter路由内部会监听beforeunload事件，在刷新页面的时候会通过<code>beforeunload</code>事件，强制触发<code>replaceState</code></p></li><li><p>解决思路:通过js事件循环机制来实现</p><ul><li>1、首先定义一个<code>标志位</code>默认为<code>true</code></li><li>2、当事件被触发后，如果是<code>true</code>,进入异步队列，如果此时连续进来2个事件只会触发一个，同步任务完成后，处理异步事件重置<code>标志位</code></li></ul></li></ul><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 重写pushState、replaceState路由 </span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#82AAFF;">_patchRouter</span><span style="color:#A6ACCD;">(type: keyof History) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">   	</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">orig</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">history</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">type</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">   	</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">_this</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this;</span></span>
<span class="line"><span style="color:#F07178;">   	</span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;font-style:italic;">this</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">unknown</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">   		</span><span style="color:#A6ACCD;">_this</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">queueFlush</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">   			</span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">_this</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">isBeforeunload</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">   			</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Event</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">type</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">       </span><span style="color:#676E95;font-style:italic;">// 创建新的全局Event事件</span></span>
<span class="line"><span style="color:#F07178;">   			</span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">dispatchEvent</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">   		</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">   		</span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">orig</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">apply</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">arguments</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">   	</span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#F07178;">   </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#82AAFF;">rewriteHistory</span><span style="color:#A6ACCD;">() </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">   	</span><span style="color:#676E95;font-style:italic;">// fix: vue路由在push会先触发replaceState在pushState</span></span>
<span class="line"><span style="color:#F07178;">   	</span><span style="color:#A6ACCD;">history</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">pushState</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">_patchRouter</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pushState</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">   	</span><span style="color:#A6ACCD;">history</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">replaceState</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">_patchRouter</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">replaceState</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">   </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#82AAFF;">beforeunloadFix</span><span style="color:#A6ACCD;">() </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">   	</span><span style="color:#676E95;font-style:italic;">// fix: vue路由会监听beforeunload事件，在刷新页面的时候会通过beforeunload事件，强制触发replaceState</span></span>
<span class="line"><span style="color:#F07178;">   	</span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">beforeunload</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">   		</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">isBeforeunload</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">   	</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">   </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#82AAFF;">routerChangeListener</span><span style="color:#A6ACCD;">(handler: </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">void</span><span style="color:#A6ACCD;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">   	</span><span style="color:#676E95;font-style:italic;">// 监听Hash、History路由变化</span></span>
<span class="line"><span style="color:#F07178;">   	</span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">popstate</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">handler</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">   	</span><span style="color:#676E95;font-style:italic;">// 监听Event</span></span>
<span class="line"><span style="color:#F07178;">   	</span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">replaceState</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">handler</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">   	</span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pushState</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">handler</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">   </span><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="产品爆光埋点" tabindex="-1">产品爆光埋点 <a class="header-anchor" href="#产品爆光埋点" aria-label="Permalink to &quot;产品爆光埋点&quot;">​</a></h2><ul><li><p>产品爆光埋点就是，用户在浏览网页时，产品已经在网页可视区域内</p></li><li><p>实际场景：如果一个产品的爆光率很高，但是下单率很低，说明产品转换率很低，产品需要调整策略</p></li><li><p>实现思路:</p><ul><li>1、定义一个属性比如是<code>data-appear</code></li><li>2、当页面加载完成后，路由地址发生变化后，获取所有带<code>data-appear</code>dom节点，<code>注意</code>由于都是虚拟DOM,不一定立马会拿到真实的DOM,这里延迟递归十次每次100毫秒</li><li>3、遍历DOM节点，通过IntersectionObserver监听，如果有data-appear属性，并且intersectionRatio&gt;0,说明在可视区域，上报数据</li></ul></li></ul><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * 爆光上报(是否可见浏览过)</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./constant</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportParams</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./types</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Utils </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./utils</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Exposure</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">ob</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">IntersectionObserver</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#C792EA;">constructor</span><span style="color:#89DDFF;">(</span><span style="color:#C792EA;">private</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">callback</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">params</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ReportParams</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">Utils</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">爆光监控初始化成功</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">count</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">ob</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">IntersectionObserver</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;font-style:italic;">entries</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#A6ACCD;">entries</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;font-style:italic;">element</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">appearKey</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">element</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAttribute</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">data-appear</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">element</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">intersectionRatio</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&gt;</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">appearKey</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">callback</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">						type</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportType</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">EXPOSURE</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">						message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">曝光埋点</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">						exposure</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">appearKey</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">init</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">appear</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">appears</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelectorAll</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">[data-appear]</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">count</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">10</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">count</span><span style="color:#89DDFF;">++;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">appears</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">appear</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">100</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#F07178;"> (</span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">index</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">index</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">appears</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">index</span><span style="color:#89DDFF;">++</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">				</span><span style="color:#676E95;font-style:italic;">// 订阅</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">ob</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">observe</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">appears</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">index</span><span style="color:#F07178;">])</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">init</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">load</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">appear</span><span style="color:#F07178;">())</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 路由监听</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">Utils</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">routerChangeListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">appear</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="自动埋点-无痕埋点" tabindex="-1">自动埋点(无痕埋点) <a class="header-anchor" href="#自动埋点-无痕埋点" aria-label="Permalink to &quot;自动埋点(无痕埋点)&quot;">​</a></h2><ul><li>实现思路： <ul><li>1、给document加一个点击事件，通过事件代理的方式，获取到事件源target</li><li>2、如果<code>事件源target</code>有data-report属性，需要自动上报数据</li></ul></li></ul><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>注意点:由于现在都是虚拟的DOM，虚拟的DOM经过转换过后<code>data-report属性</code>可能并且不在<code>事件源target上</code>,所以没有data-report属性时，需要去父节点找到</p></div><ul><li>虚拟的DOM经过转换过后</li></ul><p><img src="/fe-handbook/document/assets/point1.e942219d.png" alt="point1"></p><ul><li>事件源target</li></ul><p><img src="/fe-handbook/document/assets/point2.2c51238a.png" alt="point2"></p><h2 id="用户停留时间" tabindex="-1">用户停留时间 <a class="header-anchor" href="#用户停留时间" aria-label="Permalink to &quot;用户停留时间&quot;">​</a></h2><ul><li><p>实现思路：</p><ul><li>1、进入页面首先记录<code>当前时间</code>和<code>页面地址</code></li><li>2、当路由发现变化，或者页面关闭的时候，获取当前的时间-记录的时间，上报数据</li><li>3、最后用上一个页面的<code>离开的时间</code>更新为当前页面的当前时间，并且更新当前的页面地址</li></ul></li></ul><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * 用户页面停留时长</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./constant</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportParams</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./types</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Utils </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./utils</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">PageDwellTime</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">OFFLINE_MILL</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">15</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">60</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 15分钟不操作认为不在线</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">lastTime</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Date</span><span style="color:#89DDFF;">.</span><span style="color:#F07178;">now</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">prePageUrl</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">encodeURIComponent</span><span style="color:#A6ACCD;">(location</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">href)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">isBeforeunload</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#C792EA;">constructor</span><span style="color:#89DDFF;">(</span><span style="color:#C792EA;">private</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">callback</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">params</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ReportParams</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">Utils</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">用户页面停留时长初始化成功</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">init</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">init</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">handler</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">now</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Date</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">now</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">duration</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">now</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">lastTime</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">lastTime</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">now</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">			</span><span style="color:#676E95;font-style:italic;">// 超过十五分钟，判定为掉线</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">duration</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">OFFLINE_MILL</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">lastTime</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">now</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">callback</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">				type</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportType</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">PAGE_DWELL_TIME</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">				message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">页面停留时长</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">				durationMs</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">duration</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">				pageUrl</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">prePageUrl</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">prePageUrl</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">encodeURIComponent</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">location</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">href</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#A6ACCD;">Utils</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">routerChangeListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#82AAFF;">handler</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">100</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">		</span><span style="color:#676E95;font-style:italic;">// 页面关闭</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">beforeunload</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#82AAFF;">handler</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="pv" tabindex="-1">PV <a class="header-anchor" href="#pv" aria-label="Permalink to &quot;PV&quot;">​</a></h2><ul><li><p>浏览器每访问一个就是一个PV，逐渐累计成为PV总数</p></li><li><p>UA会根据PV做去重计算出来，一个自然日内一个IP只记录为一个UA</p></li><li><p>实现思路：</p><ul><li>在初始化时上报一个PV,路由改变时也上报一个PV</li><li>VueRouter在打开页面的时候，会触发history<code>replaceState</code>，导致路由改变被监听</li><li>如果这里不做处理会触发2次上报造成很多脏数据，经过多次测试，replaceState事件触发机制，在setTimeout之后，所以这里在初始化时，将路由监听放在setTimeout之后</li></ul></li></ul><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * pv，uv根据pv算</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./constant</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportParams</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./types</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Utils </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./utils</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Pv</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#C792EA;">constructor</span><span style="color:#89DDFF;">(</span><span style="color:#C792EA;">private</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">callback</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">params</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ReportParams</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">Utils</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">PV初始化成功</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">init</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">init</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">callback</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">				type</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportType</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">PV</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">				message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">PV</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#A6ACCD;">Utils</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">routerChangeListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">callback</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">					type</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportType</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">PV</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">					message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">PV</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">100</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="接口监控" tabindex="-1">接口监控 <a class="header-anchor" href="#接口监控" aria-label="Permalink to &quot;接口监控&quot;">​</a></h2><ul><li><p>主要是用来记录接口请求状态，异常排查与错误处理，如请求失败、超时、返回错误等</p></li><li><p>实现思路: 主要是对<code>XMLHttpRequest</code>进行AOP拦截，首先保留原有的函数，对函数进行重写实现自定义的逻辑，在通过<code>apply</code>执行原有的函数</p><ul><li>1、主要是重写了<code>open</code>,<code>send</code>、<code>onreadystatechange</code>函数</li><li>2、在open时，记录<code>接口的地址</code>、<code>请求方式</code>、<code>参数</code>、<code>请求开始的时间</code>等等</li><li>3、在send函数中，监控接口状态，当<code>readyState = 4 响应已经完成</code>,开始上报数据</li></ul></li></ul><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * 接口监控</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./constant</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportParams</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./types</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Utils </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./utils</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Xhr</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#C792EA;">constructor</span><span style="color:#89DDFF;">(</span><span style="color:#C792EA;">private</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">callback</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">params</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ReportParams</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">Utils</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">接口监控监控初始化成功</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">xhrHook</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">xhrHook</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">xhrSelf</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">xhr</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">XMLHttpRequest</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">_originOpen</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">xhr</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">prototype</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">open</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">		</span><span style="color:#676E95;font-style:italic;">// open AOP</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#FFCB6B;">xhr</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">prototype</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">open</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">method</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">xhrInfo</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#A6ACCD;">url</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#A6ACCD;">method</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">_originOpen</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">apply</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">arguments</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">};</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">		</span><span style="color:#676E95;font-style:italic;">// send AOP</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">_originSend</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">xhr</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">prototype</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">send</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#FFCB6B;">xhr</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">prototype</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">value</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">_self</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">xhrStartTime</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Date</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">now</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ajaxEnd</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">				(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">xhrInfo</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">				(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">xhrInfo</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">_self</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">				(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">xhrInfo</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">success</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span></span>
<span class="line"><span style="color:#F07178;">					(</span><span style="color:#A6ACCD;">_self</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&gt;=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">200</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">_self</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">206</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">_self</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">304</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">				(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">xhrInfo</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">duration</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Date</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">now</span><span style="color:#F07178;">() </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">xhrStartTime</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">_self</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">response</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">responseSize</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">null;</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">responseData</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">null;</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#89DDFF;font-style:italic;">switch</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">_self</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">responseType</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">						</span><span style="color:#89DDFF;font-style:italic;">case</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">json</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span></span>
<span class="line"><span style="color:#F07178;">							</span><span style="color:#A6ACCD;">responseSize</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">JSON</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">_self</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">response</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">							</span><span style="color:#A6ACCD;">responseData</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">JSON</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">_self</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">response</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">							</span><span style="color:#89DDFF;font-style:italic;">break</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">						</span><span style="color:#89DDFF;font-style:italic;">case</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">blob</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span></span>
<span class="line"><span style="color:#F07178;">							</span><span style="color:#A6ACCD;">responseSize</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">_self</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">response</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">size</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">							</span><span style="color:#89DDFF;font-style:italic;">break</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">						</span><span style="color:#89DDFF;font-style:italic;">case</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">arraybuffer</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span></span>
<span class="line"><span style="color:#F07178;">							</span><span style="color:#A6ACCD;">responseSize</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">_self</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">response</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">byteLength</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">						</span><span style="color:#676E95;font-style:italic;">// eslint-disable-next-line no-fallthrough</span></span>
<span class="line"><span style="color:#F07178;">						</span><span style="color:#89DDFF;font-style:italic;">case</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">document</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span></span>
<span class="line"><span style="color:#F07178;">							</span><span style="color:#A6ACCD;">responseSize</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span></span>
<span class="line"><span style="color:#F07178;">								</span><span style="color:#A6ACCD;">_self</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">response</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">documentElement</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span></span>
<span class="line"><span style="color:#F07178;">								</span><span style="color:#A6ACCD;">_self</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">response</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">documentElement</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerHTML</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span></span>
<span class="line"><span style="color:#F07178;">								</span><span style="color:#A6ACCD;">_self</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">response</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">documentElement</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerHTML</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">28</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">							</span><span style="color:#89DDFF;font-style:italic;">break</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">						</span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#89DDFF;">:</span></span>
<span class="line"><span style="color:#F07178;">							</span><span style="color:#89DDFF;font-style:italic;">try</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">								</span><span style="color:#A6ACCD;">responseSize</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">JSON</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">_self</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">response</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">								</span><span style="color:#A6ACCD;">responseData</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">JSON</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">_self</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">response</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">							</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">catch</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">								</span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">							</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;">					(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">xhrInfo</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">responseSize</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">responseSize</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">					(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">xhrInfo</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">responseData</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">responseData</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">					(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">xhrInfo</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">requestData</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Utils</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">isFormData</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">						</span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Binary System</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#F07178;">						</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#A6ACCD;">xhrSelf</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">callback</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#89DDFF;">...</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">xhrInfo</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">					type</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportType</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">XHR</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">					message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">接口监控</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">};</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">addEventListener</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">				</span><span style="color:#676E95;font-style:italic;">// 监听请求事件</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">load</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">ajaxEnd</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">load</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 完成</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">ajaxEnd</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 出错</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">abort</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">ajaxEnd</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">abort</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 取消</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">_origin_onreadystatechange</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">onreadystatechange</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">onreadystatechange</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">_origin_onreadystatechange</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">						</span><span style="color:#A6ACCD;">_origin_onreadystatechange</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">apply</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">arguments</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">readyState</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">4</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">						</span><span style="color:#82AAFF;">ajaxEnd</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">load</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">_originSend</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">apply</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">arguments</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="页面性能监控" tabindex="-1">页面性能监控 <a class="header-anchor" href="#页面性能监控" aria-label="Permalink to &quot;页面性能监控&quot;">​</a></h2><ul><li>通过<code>performance API</code>和谷歌web-vitals来实现数据收集</li><li>因为有些收集的数据并不是页面一加载完就能收集到，所以上报数需要后置，监听浏览器关闭事件<code>beforeunload</code>，进行上报</li><li>页面在要关闭的时候普通请求是发不出去的，所以这里需要用<code>sendBeacon</code></li></ul><p><img src="/fe-handbook/document/assets/web.ab58553b.png" alt="web"></p><h2 id="关键指标" tabindex="-1">关键指标 <a class="header-anchor" href="#关键指标" aria-label="Permalink to &quot;关键指标&quot;">​</a></h2><table><thead><tr><th>指标</th><th>计算方式</th><th>说明</th></tr></thead><tbody><tr><td>TTFB</td><td>responseStart-redirectStart</td><td>首字节时间(页面重定向到服务器接收页面的第一个字节)</td></tr><tr><td>FP</td><td>responseEnd - fetchStart</td><td>首次绘制时间-白屏时间(背景颜色绘制，它是将第一个像素点绘制到屏幕的时刻)</td></tr><tr><td>FCP</td><td>谷歌web-vitals</td><td>首次内容绘制时间(浏览器将第一个DOM渲染到屏幕的时间)</td></tr><tr><td>FMP</td><td>谷歌web-vitals</td><td>首次有意义绘制时间(FMP 是一个主观的指标，触发时机可能是<code>主要内容的绘制</code>、<code>用户页面交互</code>)</td></tr><tr><td>LCP</td><td>谷歌web-vitals</td><td>最大内容渲染时间(LCP 是一个动态的指标，它可能在页面加载过程中发生变化触发时机可能是<code>主要内容绘制完成</code>、<code>用户页面交互</code>)</td></tr><tr><td>DCL</td><td>domContentLoadedEventEnd - domContentLoadedEventStart</td><td>DOMContentLoaded事件耗时</td></tr><tr><td>L</td><td>loadEventStart - fetchStart</td><td>页面完全加载总时间</td></tr><tr><td>TTI</td><td>谷歌web-vitals</td><td>首次可交互时间(页面从加载开始到用户可以进行有意义的交互操作)</td></tr><tr><td>FID</td><td>谷歌web-vitals</td><td>首次输入延迟时间(用户首次输入与页面响应之间的延迟时间)</td></tr></tbody></table><ul><li><p>TTI触发时机</p><ul><li>1、首次绘制（FP）已经完成：页面的第一个像素已经被绘制。</li><li>2、主线程空闲时间达到一定阈值：在一段时间内，浏览器主线程没有耗时的任务在执行。这意味着页面的关键渲染路径已经完成，主要内容已经可见。</li><li>3、页面元素的可操作性：页面上的交互元素（如按钮、链接、输入框等）可以响应用户的交互操作。这表示页面已经加载完成，并且用户可以进行有意义的交互。</li><li>当以上条件都满足时，TTI 会被触发</li></ul></li><li><p>FID触发时机</p><ul><li>1、用户首次与页面进行交互：用户执行了一个交互动作，如点击按钮、滚动页面、选择下拉菜单等。</li><li>2、浏览器主线程忙于处理其他任务：当用户进行交互时，如果主线程正忙于处理其他任务（如执行 JavaScript、处理样式计算等），则会导致延迟。</li></ul></li></ul><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">DOMContentLoaded</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// DOMContentLoaded事件耗时</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * 页面性能指标</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">onFCP</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">onLCP</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">onFID</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">web-vitals</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./constant</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportParams</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./types</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Utils </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./utils</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Perf</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">cycleFreq</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 循环轮询的时间</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">timer</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#C792EA;">constructor</span><span style="color:#89DDFF;">(</span><span style="color:#C792EA;">private</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">callback</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">params</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ReportParams</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">Utils</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">页面渲染性能监控初始化成功</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">init</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">runCheck</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">FCP</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">LCP</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">FID</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">FMP</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">performance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getEntriesByType</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">navigation</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#F07178;">		)[</span><span style="color:#F78C6C;">0</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">PerformanceNavigationTiming</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">PerformanceObserver</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">entryList</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">observer</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">perfEntries</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">entryList</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getEntries</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#A6ACCD;">FMP</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">perfEntries</span><span style="color:#F07178;">[</span><span style="color:#F78C6C;">0</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">startTime</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#A6ACCD;">observer</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">disconnect</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//不再观察了</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">observe</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> entryTypes</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">element</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//观察页面中的意义的元素</span></span>
<span class="line"><span style="color:#89DDFF;">		</span><span style="color:#676E95;font-style:italic;">// 首次内容绘制</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#82AAFF;">onFCP</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;font-style:italic;">data</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#A6ACCD;">FCP</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">data</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#82AAFF;">callback</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">		</span><span style="color:#676E95;font-style:italic;">// 最大内容绘制</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#82AAFF;">onLCP</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;font-style:italic;">data</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#A6ACCD;">LCP</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">data</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#82AAFF;">callback</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">		</span><span style="color:#676E95;font-style:italic;">// 首次输入延迟</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#82AAFF;">onFID</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;font-style:italic;">data</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#A6ACCD;">FID</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">data</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#82AAFF;">callback</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">callback</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">callback</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">				type</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportType</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">PERFORMANCE</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">				message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">页面渲染性能</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">				unload</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">unloadEventEnd</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">unloadEventStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 前一个页面卸载耗时</span></span>
<span class="line"><span style="color:#F07178;">				redirect</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">redirectEnd</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">redirectStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 重定向的时间</span></span>
<span class="line"><span style="color:#F07178;">				appCache</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">domainLookupStart</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fetchStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 读取缓存的时间</span></span>
<span class="line"><span style="color:#F07178;">				dns</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">domainLookupEnd</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">domainLookupStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// DNS查询耗时</span></span>
<span class="line"><span style="color:#F07178;">				tcp</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">connectEnd</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">connectStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// TCP连接耗时</span></span>
<span class="line"><span style="color:#F07178;">				ssl</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">connectEnd</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">secureConnectionStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// SSL 安全连接耗时</span></span>
<span class="line"><span style="color:#F07178;">				rst</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">responseStart</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">requestStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 请求响应耗时</span></span>
<span class="line"><span style="color:#F07178;">				trans</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">responseEnd</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">responseStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 响应数据传输耗时</span></span>
<span class="line"><span style="color:#F07178;">				ready</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">domComplete</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">domInteractive</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// DOM解析耗时(不包含dom内嵌资源加载时间)</span></span>
<span class="line"><span style="color:#F07178;">				resources</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loadEventStart</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">domContentLoadedEventEnd</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//资源加载耗时</span></span>
<span class="line"><span style="color:#F07178;">				onLoad</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loadEventEnd</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loadEventStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// onLoad事件耗时(所有资源已加载)</span></span>
<span class="line"><span style="color:#89DDFF;">				</span><span style="color:#676E95;font-style:italic;">// 指标</span></span>
<span class="line"><span style="color:#F07178;">				TTFB</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">responseStart</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">redirectStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 首字节(重定向到-&gt;服务器接收页面的第一个字节)</span></span>
<span class="line"><span style="color:#F07178;">				FP</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">responseEnd</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fetchStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 白屏时间 首次绘制包括了任何用户自定义的背景颜色绘制，它是将第一个像素点绘制到屏幕的时刻</span></span>
<span class="line"><span style="color:#F07178;">				FCP</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">FCP</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//	首次内容绘制 是浏览器将第一个DOM渲染到屏幕的时间,可以是任何文本、图像、SVG等的时间</span></span>
<span class="line"><span style="color:#F07178;">				FMP</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">FMP</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//	首次有意义绘制</span></span>
<span class="line"><span style="color:#F07178;">				LCP</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">LCP</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//	最大内容渲染(事件响应时触发)</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#82AAFF;">DCL</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">domContentLoadedEventEnd</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">domContentLoadedEventStart</span></span>
<span class="line"><span style="color:#F07178;">				)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// DOMContentLoaded事件耗时</span></span>
<span class="line"><span style="color:#F07178;">				L</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loadEventStart</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fetchStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 页面完全加载总时间(load)</span></span>
<span class="line"><span style="color:#F07178;">				TTI</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">domInteractive</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fetchStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 首次可交互时间</span></span>
<span class="line"><span style="color:#F07178;">				FID</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">FID</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//	首次输入延迟时间(点击到响应的时间差)</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#89DDFF;">		</span><span style="color:#676E95;font-style:italic;">// 保证load事件结束</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loadEventEnd</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#82AAFF;">callback</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#82AAFF;">clearInterval</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">timer</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">timer</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">runCheck</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">bind</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">cycleFreq</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">init</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">load</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">runCheck</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="资源性能监控" tabindex="-1">资源性能监控 <a class="header-anchor" href="#资源性能监控" aria-label="Permalink to &quot;资源性能监控&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li>跨域资源 <code>redirectStart</code>、<code>redirectEnd</code>、<code>domainLookupStart</code>、<code>domainLookupEnd</code>、<code>connectStart</code>、<code>connectEnd</code>、<code>secureConnectionStart</code>、<code>requestStart</code>、<code>responseStart</code>、<code>transferSize</code>的值都为0，需要设置跨域资源需要设置响应头 <code>Timing-Allow-Origin:*</code></li></ul></div><ul><li>资源监控主要是用<code>PerformanceObserver API</code>或者<code>performance.getEntriesByType</code></li><li>PerformanceObserver是发布订阅者模式，加载一个或者多个资源通知一次</li><li>performance.getEntriesByType是在页面加载完成后，一次性或者到所有的资源，无法监听动态加载的资源</li></ul><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * 资源加载性能指标</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> */</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./constant</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportParams</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./types</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Utils </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./utils</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">class</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ResourcesPerf</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#C792EA;">constructor</span><span style="color:#89DDFF;">(</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#C792EA;">private</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">callback</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">params</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ReportParams</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#C792EA;">private</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">reportUrl</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">Utils</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">资源加载性能指标初始化成功</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">init</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">resolveEntries</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">entries</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">PerformanceResourceTiming</span><span style="color:#A6ACCD;">[]</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Array</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">ReportParams</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timings</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Array</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">ReportParams</span><span style="color:#89DDFF;">&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> []</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">entries</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">timing</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">PerformanceResourceTiming</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">checkReport</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">timing</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#A6ACCD;">timings</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">					type</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ReportType</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">RES_PERFORMANCE</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">					message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">资源加载性能</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">					resourcesUrl</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">					resourcesType</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">initiatorType</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">					redirect</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">redirectEnd</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">redirectStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 重定向</span></span>
<span class="line"><span style="color:#F07178;">					appCache</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">domainLookupStart</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fetchStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 缓存</span></span>
<span class="line"><span style="color:#F07178;">					dns</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">domainLookupEnd</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">domainLookupStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">					tcp</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">connectEnd</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">connectStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">					ssl</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">connectEnd</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">secureConnectionStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// https下有效</span></span>
<span class="line"><span style="color:#F07178;">					rst</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">responseStart</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">requestStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 请求响应耗时</span></span>
<span class="line"><span style="color:#F07178;">					trans</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">responseEnd</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">responseStart</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 内容传输耗时</span></span>
<span class="line"><span style="color:#F07178;">					duration</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">duration</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toFixed</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 加载时长</span></span>
<span class="line"><span style="color:#F07178;">					decodedBodySize</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">decodedBodySize</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">					encodedBodySize</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">encodedBodySize</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">					transferSize</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">transferSize</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timings</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">	</span><span style="color:#676E95;font-style:italic;">// link(css) script img audio video css(字体)</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">checkReport</span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">initiatorType</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">name</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">PerformanceResourceTiming</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">		</span><span style="color:#676E95;font-style:italic;">// eslint-disable-next-line @typescript-eslint/no-non-null-assertion</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">startsWith</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">reportUrl</span><span style="color:#89DDFF;">!</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">			</span><span style="color:#676E95;font-style:italic;">// 防止上报死循环</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#A6ACCD;">initiatorType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">link</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#A6ACCD;">initiatorType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">script</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#A6ACCD;">initiatorType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">img</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#A6ACCD;">initiatorType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">audio</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#A6ACCD;">initiatorType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">video</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#A6ACCD;">initiatorType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">css</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#F07178;">		) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">init</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">PerformanceObserver</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">observer</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">PerformanceObserver</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;font-style:italic;">performance</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">entries</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">performance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getEntries</span><span style="color:#F07178;">() </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">PerformanceResourceTiming</span><span style="color:#F07178;">[]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timings</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">resolveEntries</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">entries</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#A6ACCD;">timings</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;font-style:italic;">timing</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">callback</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">timing</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#A6ACCD;">observer</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">observe</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">				entryTypes</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">resource</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">load</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">entries</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">performance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getEntriesByType</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">resource</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#F07178;">				) </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">PerformanceResourceTiming</span><span style="color:#F07178;">[]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">timings</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">resolveEntries</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">entries</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#A6ACCD;">timings</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;font-style:italic;">timing</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">					</span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">callback</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">timing</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">				</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">			</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="用户链路追踪" tabindex="-1">用户链路追踪 <a class="header-anchor" href="#用户链路追踪" aria-label="Permalink to &quot;用户链路追踪&quot;">​</a></h2><h2 id="用户页面行为录制" tabindex="-1">用户页面行为录制 <a class="header-anchor" href="#用户页面行为录制" aria-label="Permalink to &quot;用户页面行为录制&quot;">​</a></h2></div></div></main><footer class="VPDocFooter" data-v-c11df1f0 data-v-fc0d1b73><!--[--><!--]--><div class="edit-info" data-v-fc0d1b73><!----><div class="last-updated" data-v-fc0d1b73><p class="VPLastUpdated" data-v-fc0d1b73 data-v-0de45606>上次更新: <time datetime="2024-02-21T09:31:46.000Z" data-v-0de45606></time></p></div></div><div class="prev-next" data-v-fc0d1b73><div class="pager" data-v-fc0d1b73><a class="pager-link prev" href="/fe-handbook/document/pages/workReview/axiosPackaging.html" data-v-fc0d1b73><span class="desc" data-v-fc0d1b73>Previous page</span><span class="title" data-v-fc0d1b73>axios封装</span></a></div><div class="has-prev pager" data-v-fc0d1b73><a class="pager-link next" href="/fe-handbook/document/pages/workReview/ImagedragVerification.html" data-v-fc0d1b73><span class="desc" data-v-fc0d1b73>Next page</span><span class="title" data-v-fc0d1b73>图片拖动验证</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"pages_advancedprogramming_chapterone.md\":\"8fd81287\",\"pages_htmlcss_layout.md\":\"f07c901d\",\"index.md\":\"4ccfffb7\",\"pages_advancedprogramming_index.md\":\"3885217d\",\"code_fe-rec_readme.md\":\"71d0c648\",\"readme.md\":\"df521108\",\"code_virtual-list_readme.md\":\"17e862f9\",\"pages_guide.md\":\"706d8779\",\"pages_jsbase_typeconversion.md\":\"df6df8ff\",\"pages_htmlcss_bfc.md\":\"21d6a345\",\"pages_jsbase_cookielocal.md\":\"07b498fe\",\"pages_jsbase_datatype.md\":\"6076c1b6\",\"pages_jsbase_prototype.md\":\"6b57d6e9\",\"pages_htmlcss_htmlcss.md\":\"8b4e53c2\",\"pages_advancedprogramming_chaptertwo.md\":\"ad76f5b8\",\"pages_advancedprogramming_chapterthree.md\":\"8207f883\",\"pages_htmlcss_align.md\":\"8cc3e186\",\"pages_git.md\":\"5308b89e\",\"pages_jsbase_arrayapi.md\":\"751b1dff\",\"pages_htmlcss_boxmodel.md\":\"498a703b\",\"pages_htmlcss_position.md\":\"c5594a7c\",\"pages_jsbase_binary.md\":\"9b13b269\",\"pages_htmlcss_dice.md\":\"cc205c39\",\"pages_workreview_vuexpersistence.md\":\"1df9efec\",\"pages_workreview_reduxpersistence.md\":\"2f4f8ba5\",\"pages_webpack.md\":\"e8ec95fb\",\"pages_jsbase_scope.md\":\"268d233b\",\"pages_vue_vuex4.0.md\":\"98700d83\",\"pages_workreview_reactsolt.md\":\"2438b161\",\"pages_jsbase_this.md\":\"9d7c8fa7\",\"pages_workreview_virtuallist.md\":\"1db3bb5e\",\"code_big-files-upload_index.md\":\"49cc321f\",\"pages_jsbase_regular.md\":\"fea9b33d\",\"pages_jsbase_eventloop.md\":\"ddceb0f2\",\"pages_htmlcss_rem-em-vw.md\":\"f5e61910\",\"pages_optimize.md\":\"9b05a225\",\"pages_jsbase_promotion.md\":\"7da50ccc\",\"pages_jsbase_eightleggedessay.md\":\"560c41b2\",\"pages_jsbase_promise.md\":\"3d80d27b\",\"pages_vue_vuerouter4.0.md\":\"5ca24aaa\",\"pages_htmlcss_margin.md\":\"6fd000ce\",\"pages_flutter_index.md\":\"b69ef00b\",\"pages_workreview_interfacesignaturedesign.md\":\"98a64266\",\"pages_workreview_stripe.md\":\"68fbf713\",\"pages_http.md\":\"42149b78\",\"pages_nginx.md\":\"76adfb79\",\"pages_nodejs_nest.md\":\"340072bd\",\"pages_updatelog.md\":\"3a8f3b74\",\"pages_linux.md\":\"db194270\",\"pages_nodejs_index.md\":\"b91cc4fe\",\"pages_ssr.md\":\"29ae7526\",\"pages_vue_vue2.0.md\":\"ddaba816\",\"pages_resume.md\":\"e770c83b\",\"pages_react_react.md\":\"dd542d19\",\"pages_workreview_monitor.md\":\"bef20b19\",\"pages_react_redux.md\":\"a3c335fe\",\"pages_workreview_bigfileupload.md\":\"93f0370f\",\"pages_datastructure.md\":\"60632978\",\"pages_workreview_imagecroppingcompression.md\":\"3273dca0\",\"pages_jsbase_coding.md\":\"fd837602\",\"pages_xss-csrf.md\":\"afbef4b3\",\"pages_designpatterns.md\":\"7ba6c4c8\",\"pages_workreview_imagedragverification.md\":\"de2e29d5\",\"pages_workreview_audio.md\":\"e00ea8e1\",\"pages_workreview_axiospackaging.md\":\"e241a1bb\",\"pages_htmlcss_grid.md\":\"fee00858\",\"pages_vue_vue3.0.md\":\"21ba1254\",\"pages_jsbase_typescript.md\":\"48ee2090\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"前端码农\",\"description\":\"前端码农手记\",\"base\":\"/fe-handbook/document/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"lastUpdatedText\":\"上次更新\",\"logo\":\"images/logo.svg\",\"nav\":[{\"text\":\"主页\",\"link\":\"/\"},{\"text\":\"指南\",\"link\":\"/pages/guide\"},{\"text\":\"更新日志\",\"link\":\"/pages/updateLog\"}],\"socialLinks\":[],\"sidebar\":[{\"collapsed\":false,\"items\":[{\"text\":\"开发指南\",\"link\":\"/pages/guide\"}]},{\"text\":\"JavaScript高级程序设计\",\"collapsed\":false,\"items\":[{\"text\":\"0.前言\",\"link\":\"/pages/advancedProgramming/index.md\"},{\"text\":\"1.什么是JavaScript\",\"link\":\"/pages/advancedProgramming/chapterOne.md\"},{\"text\":\"2.HTML中的JavaScript\",\"link\":\"/pages/advancedProgramming/chapterTwo.md\"},{\"text\":\"3.语言基础\",\"link\":\"/pages/advancedProgramming/chapterThree.md\"}]},{\"text\":\"vue技术栈\",\"collapsed\":false,\"items\":[{\"text\":\"vue2.0\",\"link\":\"/pages/vue/vue2.0.md\"},{\"text\":\"vue3.0\",\"link\":\"/pages/vue/vue3.0.md\"},{\"text\":\"vuex4.0\",\"link\":\"/pages/vue/vuex4.0.md\"}]},{\"text\":\"react技术栈\",\"collapsed\":false,\"items\":[{\"text\":\"react18\",\"link\":\"/pages/react/react.md\"},{\"text\":\"redux\",\"link\":\"/pages/react/redux.md\"}]},{\"text\":\"nodejs技术栈\",\"collapsed\":false,\"items\":[{\"text\":\"nodeJS\",\"link\":\"/pages/nodeJS/index.md\"},{\"text\":\"nest\",\"link\":\"/pages/nodeJS/nest.md\"}]},{\"text\":\"flutter\",\"collapsed\":false,\"items\":[{\"text\":\"flutter\",\"link\":\"/pages/flutter/index.md\"}]},{\"text\":\"数据结构算法&设计模式\",\"collapsed\":false,\"items\":[{\"text\":\"dataStructure\",\"link\":\"/pages/dataStructure.md\"},{\"text\":\"设计模式\",\"link\":\"/pages/designPatterns.md\"}]},{\"text\":\"js基础进阶\",\"collapsed\":false,\"items\":[{\"text\":\"数据类型\",\"link\":\"/pages/jsBase/dataType.md\"},{\"text\":\"数据类型转换\",\"link\":\"/pages/jsBase/typeConversion.md\"},{\"text\":\"原型与原型链\",\"link\":\"/pages/jsBase/prototype.md\"},{\"text\":\"闭包\",\"link\":\"/pages/jsBase/scope.md\"},{\"text\":\"this指针\",\"link\":\"/pages/jsBase/this.md\"},{\"text\":\"JS中的变量提升和函数提升\",\"link\":\"/pages/jsBase/promotion.md\"},{\"text\":\"异步&事件循环机制\",\"link\":\"/pages/jsBase/eventLoop.md\"},{\"text\":\"promise\",\"link\":\"/pages/jsBase/promise.md\"},{\"text\":\"cookie&local\",\"link\":\"/pages/jsBase/cookieLocal.md\"},{\"text\":\"arrayApi\",\"link\":\"/pages/jsBase/arrayApi.md\"},{\"text\":\"正则\",\"link\":\"/pages/jsBase/regular.md\"},{\"text\":\"coding\",\"link\":\"/pages/jsBase/coding.md\"},{\"text\":\"typescript\",\"link\":\"/pages/jsBase/typescript.md\"}]},{\"text\":\"前端综合\",\"collapsed\":false,\"items\":[{\"text\":\"前端八股文\",\"link\":\"/pages/jsBase/eightLeggedEssay.md\"},{\"text\":\"二进制\",\"link\":\"/pages/jsBase/binary.md\"},{\"text\":\"ssr\",\"link\":\"/pages/ssr.md\"},{\"text\":\"webpack\",\"link\":\"/pages/webpack.md\"},{\"text\":\"http\",\"link\":\"/pages/http.md\"},{\"text\":\"性能优化\",\"link\":\"/pages/optimize.md\"},{\"text\":\"xss-csrf\",\"link\":\"/pages/xss-csrf.md\"},{\"text\":\"linux\",\"link\":\"/pages/linux.md\"},{\"text\":\"nginx\",\"link\":\"/pages/nginx.md\"},{\"text\":\"git管理\",\"link\":\"/pages/git.md\"}]},{\"text\":\"工作复盘\",\"collapsed\":false,\"items\":[{\"text\":\"stripe支付体检优化\",\"link\":\"/pages/workReview/stripe.md\"},{\"text\":\"接口签名设计\",\"link\":\"/pages/workReview/interfaceSignatureDesign.md\"},{\"text\":\"redux数据持久化\",\"link\":\"/pages/workReview/reduxpersistence.md\"},{\"text\":\"vuex数据持久化\",\"link\":\"/pages/workReview/vuexpersistence.md\"},{\"text\":\"react插槽设计\",\"link\":\"/pages/workReview/reactSolt.md\"},{\"text\":\"大文件上传\",\"link\":\"/pages/workReview/bigfileUpload.md\"},{\"text\":\"音频录制\",\"link\":\"/pages/workReview/audio.md\"},{\"text\":\"虚拟列表\",\"link\":\"/pages/workReview/virtuaLlist.md\"},{\"text\":\"图片裁剪&压缩\",\"link\":\"/pages/workReview/imageCroppingCompression.md\"},{\"text\":\"axios封装\",\"link\":\"/pages/workReview/axiosPackaging.md\"},{\"text\":\"前端监控SDK\",\"link\":\"/pages/workReview/monitor.md\"},{\"text\":\"图片拖动验证\",\"link\":\"/pages/workReview/ImagedragVerification.md\"}]},{\"text\":\"html/css\",\"collapsed\":false,\"items\":[{\"text\":\"盒模型\",\"link\":\"/pages/htmlCss/boxModel.md\"},{\"text\":\"margin重叠\",\"link\":\"/pages/htmlCss/margin.md\"},{\"text\":\"bfc\",\"link\":\"/pages/htmlCss/bfc.md\"},{\"text\":\"圣杯布局&双飞翼布局\",\"link\":\"/pages/htmlCss/layout.md\"},{\"text\":\"flex画骰子\",\"link\":\"/pages/htmlCss/dice.md\"},{\"text\":\"position定位\",\"link\":\"/pages/htmlCss/position.md\"},{\"text\":\"对齐\",\"link\":\"/pages/htmlCss/align.md\"},{\"text\":\"rem-em-vw\",\"link\":\"/pages/htmlCss/rem-em-vw.md\"},{\"text\":\"grid布局\",\"link\":\"/pages/htmlCss/grid.md\"},{\"text\":\"htmlCss总结\",\"link\":\"/pages/htmlCss/htmlCss.md\"}]}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>
</html>